<template>
  <div class="settings-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">系统设置</h1>
          <p class="page-subtitle">个性化您的转换体验</p>
        </div>
        
        <div class="header-actions">
          <button 
            class="btn btn-secondary"
            @click="resetToDefaults"
            :disabled="saving"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="1,4 1,10 7,10"/>
              <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
            </svg>
            恢复默认
          </button>
          
          <button 
            class="btn btn-primary"
            @click="saveSettings"
            :disabled="saving || !hasChanges"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
              <polyline points="17,21 17,13 7,13 7,21"/>
              <polyline points="7,3 7,8 15,8"/>
            </svg>
            {{ saving ? '保存中...' : '保存设置' }}
          </button>
        </div>
      </div>
    </div>
    
    <!-- 设置内容 -->
    <div class="settings-content">
      <div class="settings-container">
        <!-- 侧边导航 -->
        <div class="settings-nav">
          <div class="nav-section">
            <h3 class="nav-title">设置分类</h3>
            <ul class="nav-list">
              <li 
                v-for="section in settingSections"
                :key="section.id"
                class="nav-item"
                :class="{ active: activeSection === section.id }"
                @click="setActiveSection(section.id)"
              >
                <component :is="section.icon" class="nav-icon" />
                <span class="nav-label">{{ section.title }}</span>
                <span v-if="section.badge" class="nav-badge">{{ section.badge }}</span>
              </li>
            </ul>
          </div>
        </div>
        
        <!-- 设置面板 -->
        <div class="settings-panel">
          <!-- 通用设置 -->
          <div v-if="activeSection === 'general'" class="setting-section">
            <div class="section-header">
              <h2 class="section-title">通用设置</h2>
              <p class="section-description">配置应用的基本行为和外观</p>
            </div>
            
            <div class="setting-groups">
              <!-- 主题设置 -->
              <div class="setting-group">
                <h3 class="group-title">外观主题</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">主题模式</label>
                    <p class="setting-desc">选择您偏好的界面主题</p>
                  </div>
                  <div class="setting-control">
                    <div class="theme-selector">
                      <button 
                        v-for="theme in themeOptions"
                        :key="theme.value"
                        class="theme-option"
                        :class="{ active: localSettings.theme === theme.value }"
                        @click="updateSetting('theme', theme.value)"
                      >
                        <component :is="theme.icon" class="theme-icon" />
                        <span class="theme-label">{{ theme.label }}</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 语言设置 -->
              <div class="setting-group">
                <h3 class="group-title">语言和地区</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">界面语言</label>
                    <p class="setting-desc">选择应用界面显示语言</p>
                  </div>
                  <div class="setting-control">
                    <select 
                      v-model="localSettings.language"
                      class="setting-select"
                      @change="updateSetting('language', $event.target.value)"
                    >
                      <option value="zh-CN">简体中文</option>
                      <option value="zh-TW">繁體中文</option>
                      <option value="en-US">English</option>
                      <option value="ja-JP">日本語</option>
                    </select>
                  </div>
                </div>
                
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">时区</label>
                    <p class="setting-desc">设置时间显示的时区</p>
                  </div>
                  <div class="setting-control">
                    <select 
                      v-model="localSettings.timezone"
                      class="setting-select"
                      @change="updateSetting('timezone', $event.target.value)"
                    >
                      <option value="Asia/Shanghai">北京时间 (UTC+8)</option>
                      <option value="Asia/Tokyo">东京时间 (UTC+9)</option>
                      <option value="America/New_York">纽约时间 (UTC-5)</option>
                      <option value="Europe/London">伦敦时间 (UTC+0)</option>
                    </select>
                  </div>
                </div>
              </div>
              
              <!-- 自动保存 -->
              <div class="setting-group">
                <h3 class="group-title">数据管理</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">自动保存设置</label>
                    <p class="setting-desc">自动保存您的设置更改</p>
                  </div>
                  <div class="setting-control">
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="localSettings.autoSave"
                        @change="updateSetting('autoSave', $event.target.checked)"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 转换设置 -->
          <div v-if="activeSection === 'conversion'" class="setting-section">
            <div class="section-header">
              <h2 class="section-title">转换设置</h2>
              <p class="section-description">配置文档转换的默认选项</p>
            </div>
            
            <div class="setting-groups">
              <!-- 默认格式 -->
              <div class="setting-group">
                <h3 class="group-title">默认输出格式</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">首选输出格式</label>
                    <p class="setting-desc">新建转换任务时的默认格式</p>
                  </div>
                  <div class="setting-control">
                    <div class="format-grid">
                      <button 
                        v-for="format in outputFormats"
                        :key="format.value"
                        class="format-option"
                        :class="{ active: localSettings.defaultOutputFormat === format.value }"
                        @click="updateSetting('defaultOutputFormat', format.value)"
                      >
                        <component :is="format.icon" class="format-icon" />
                        <span class="format-label">{{ format.label }}</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 质量设置 -->
              <div class="setting-group">
                <h3 class="group-title">转换质量</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">PDF 质量</label>
                    <p class="setting-desc">PDF 输出的图像质量和文件大小平衡</p>
                  </div>
                  <div class="setting-control">
                    <div class="quality-selector">
                      <input 
                        type="range"
                        min="1"
                        max="5"
                        v-model="localSettings.pdfQuality"
                        @input="updateSetting('pdfQuality', $event.target.value)"
                        class="quality-slider"
                      />
                      <div class="quality-labels">
                        <span>压缩</span>
                        <span>平衡</span>
                        <span>高质量</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">自动下载</label>
                    <p class="setting-desc">转换完成后自动下载文件</p>
                  </div>
                  <div class="setting-control">
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="localSettings.autoDownload"
                        @change="updateSetting('autoDownload', $event.target.checked)"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
              
              <!-- 并发设置 -->
              <div class="setting-group">
                <h3 class="group-title">性能设置</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">并发任务数</label>
                    <p class="setting-desc">同时处理的最大任务数量</p>
                  </div>
                  <div class="setting-control">
                    <select 
                      v-model="localSettings.maxConcurrentTasks"
                      class="setting-select"
                      @change="updateSetting('maxConcurrentTasks', parseInt($event.target.value))"
                    >
                      <option :value="1">1 个任务</option>
                      <option :value="2">2 个任务</option>
                      <option :value="3">3 个任务</option>
                      <option :value="5">5 个任务</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 通知设置 -->
          <div v-if="activeSection === 'notifications'" class="setting-section">
            <div class="section-header">
              <h2 class="section-title">通知设置</h2>
              <p class="section-description">管理各种通知的接收方式</p>
            </div>
            
            <div class="setting-groups">
              <!-- 桌面通知 -->
              <div class="setting-group">
                <h3 class="group-title">桌面通知</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">启用桌面通知</label>
                    <p class="setting-desc">在系统托盘显示通知消息</p>
                  </div>
                  <div class="setting-control">
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="localSettings.desktopNotifications"
                        @change="updateSetting('desktopNotifications', $event.target.checked)"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
                
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">声音提醒</label>
                    <p class="setting-desc">通知时播放提示音</p>
                  </div>
                  <div class="setting-control">
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="localSettings.soundNotifications"
                        @change="updateSetting('soundNotifications', $event.target.checked)"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
              
              <!-- 邮件通知 -->
              <div class="setting-group">
                <h3 class="group-title">邮件通知</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">任务完成通知</label>
                    <p class="setting-desc">转换任务完成时发送邮件</p>
                  </div>
                  <div class="setting-control">
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="localSettings.emailNotifications"
                        @change="updateSetting('emailNotifications', $event.target.checked)"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
                
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">每日摘要</label>
                    <p class="setting-desc">每日发送转换统计摘要</p>
                  </div>
                  <div class="setting-control">
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="localSettings.dailySummary"
                        @change="updateSetting('dailySummary', $event.target.checked)"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 存储设置 -->
          <div v-if="activeSection === 'storage'" class="setting-section">
            <div class="section-header">
              <h2 class="section-title">存储设置</h2>
              <p class="section-description">管理文件存储和缓存选项</p>
            </div>
            
            <div class="setting-groups">
              <!-- 文件保留 -->
              <div class="setting-group">
                <h3 class="group-title">文件管理</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">文件保留时间</label>
                    <p class="setting-desc">转换后的文件在服务器保存时长</p>
                  </div>
                  <div class="setting-control">
                    <select 
                      v-model="localSettings.fileRetentionDays"
                      class="setting-select"
                      @change="updateSetting('fileRetentionDays', parseInt($event.target.value))"
                    >
                      <option :value="1">1 天</option>
                      <option :value="3">3 天</option>
                      <option :value="7">7 天</option>
                      <option :value="30">30 天</option>
                      <option :value="0">永久保存</option>
                    </select>
                  </div>
                </div>
                
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">自动清理缓存</label>
                    <p class="setting-desc">定期清理临时文件和缓存</p>
                  </div>
                  <div class="setting-control">
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="localSettings.autoClearCache"
                        @change="updateSetting('autoClearCache', $event.target.checked)"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
              
              <!-- 存储统计 -->
              <div class="setting-group">
                <h3 class="group-title">存储统计</h3>
                <div class="storage-stats">
                  <div class="stat-item">
                    <div class="stat-icon">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                        <polyline points="14,2 14,8 20,8"/>
                      </svg>
                    </div>
                    <div class="stat-info">
                      <div class="stat-value">{{ storageStats.totalFiles || 0 }}</div>
                      <div class="stat-label">总文件数</div>
                    </div>
                  </div>
                  
                  <div class="stat-item">
                    <div class="stat-icon">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                      </svg>
                    </div>
                    <div class="stat-info">
                      <div class="stat-value">{{ storageStats.totalSize || '0 MB' }}</div>
                      <div class="stat-label">占用空间</div>
                    </div>
                  </div>
                </div>
                
                <button 
                  class="btn btn-secondary btn-block"
                  @click="clearCache"
                  :disabled="clearing"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 6h18"/>
                    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
                    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
                  </svg>
                  {{ clearing ? '清理中...' : '立即清理缓存' }}
                </button>
              </div>
            </div>
          </div>
          
          <!-- 高级设置 -->
          <div v-if="activeSection === 'advanced'" class="setting-section">
            <div class="section-header">
              <h2 class="section-title">高级设置</h2>
              <p class="section-description">开发者和高级用户选项</p>
            </div>
            
            <div class="setting-groups">
              <!-- 调试模式 -->
              <div class="setting-group">
                <h3 class="group-title">开发者选项</h3>
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">调试模式</label>
                    <p class="setting-desc">启用详细的日志记录和错误信息</p>
                  </div>
                  <div class="setting-control">
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="localSettings.debugMode"
                        @change="updateSetting('debugMode', $event.target.checked)"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
                
                <div class="setting-item">
                  <div class="setting-info">
                    <label class="setting-label">API 端点</label>
                    <p class="setting-desc">自定义 API 服务器地址</p>
                  </div>
                  <div class="setting-control">
                    <input 
                      type="url"
                      v-model="localSettings.apiEndpoint"
                      @input="updateSetting('apiEndpoint', $event.target.value)"
                      class="setting-input"
                      placeholder="https://api.example.com"
                    />
                  </div>
                </div>
              </div>
              
              <!-- 数据导入导出 -->
              <div class="setting-group">
                <h3 class="group-title">数据管理</h3>
                <div class="setting-actions">
                  <button 
                    class="btn btn-secondary"
                    @click="exportSettings"
                  >
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                      <polyline points="7,10 12,15 17,10"/>
                      <line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                    导出设置
                  </button>
                  
                  <button 
                    class="btn btn-secondary"
                    @click="importSettings"
                  >
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                      <polyline points="17,8 12,3 7,8"/>
                      <line x1="12" y1="3" x2="12" y2="15"/>
                    </svg>
                    导入设置
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 隐藏的文件输入 -->
    <input 
      ref="fileInput"
      type="file"
      accept=".json"
      style="display: none"
      @change="handleImportFile"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useSettingsStore } from '@/stores/settings'

// 图标组件（简化的 SVG 图标）
const SunIcon = { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>' }
const MoonIcon = { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>' }
const MonitorIcon = { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>' }
const SettingsIcon = { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>' }
const FileTextIcon = { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10,9 9,10 8,9"/></svg>' }
const BellIcon = { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>' }
const DatabaseIcon = { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>' }
const CodeIcon = { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/></svg>' }

// Store
const settingsStore = useSettingsStore()

// 响应式数据
const activeSection = ref('general')
const saving = ref(false)
const clearing = ref(false)
const localSettings = ref({ ...settingsStore.settings })
const fileInput = ref<HTMLInputElement>()

// 设置分类
const settingSections = [
  { id: 'general', title: '通用设置', icon: SettingsIcon },
  { id: 'conversion', title: '转换设置', icon: FileTextIcon },
  { id: 'notifications', title: '通知设置', icon: BellIcon },
  { id: 'storage', title: '存储设置', icon: DatabaseIcon },
  { id: 'advanced', title: '高级设置', icon: CodeIcon, badge: 'Beta' }
]

// 主题选项
const themeOptions = [
  { value: 'light', label: '浅色', icon: SunIcon },
  { value: 'dark', label: '深色', icon: MoonIcon },
  { value: 'auto', label: '跟随系统', icon: MonitorIcon }
]

// 输出格式选项
const outputFormats = [
  { value: 'pdf', label: 'PDF', icon: FileTextIcon },
  { value: 'docx', label: 'Word', icon: FileTextIcon },
  { value: 'html', label: 'HTML', icon: FileTextIcon },
  { value: 'epub', label: 'EPUB', icon: FileTextIcon }
]

// 存储统计
const storageStats = ref({
  totalFiles: 0,
  totalSize: '0 MB'
})

// 计算属性
const hasChanges = computed(() => {
  return JSON.stringify(localSettings.value) !== JSON.stringify(settingsStore.settings)
})

// 方法
const setActiveSection = (sectionId: string) => {
  activeSection.value = sectionId
}

const updateSetting = (key: string, value: any) => {
  localSettings.value = {
    ...localSettings.value,
    [key]: value
  }
  
  // 如果启用了自动保存，立即保存
  if (localSettings.value.autoSave) {
    saveSettings()
  }
}

const saveSettings = async () => {
  saving.value = true
  try {
    await settingsStore.updateSettings(localSettings.value)
    console.log('Settings saved successfully')
  } catch (error) {
    console.error('Failed to save settings:', error)
  } finally {
    saving.value = false
  }
}

const resetToDefaults = async () => {
  if (!confirm('确定要恢复所有设置到默认值吗？此操作不可撤销。')) {
    return
  }
  
  try {
    await settingsStore.resetToDefaults()
    localSettings.value = { ...settingsStore.settings }
    console.log('Settings reset to defaults')
  } catch (error) {
    console.error('Failed to reset settings:', error)
  }
}

const clearCache = async () => {
  clearing.value = true
  try {
    // 模拟清理缓存
    await new Promise(resolve => setTimeout(resolve, 2000))
    loadStorageStats()
    console.log('Cache cleared successfully')
  } catch (error) {
    console.error('Failed to clear cache:', error)
  } finally {
    clearing.value = false
  }
}

const exportSettings = () => {
  const settingsData = {
    version: '1.0',
    timestamp: new Date().toISOString(),
    settings: localSettings.value
  }
  
  const blob = new Blob([JSON.stringify(settingsData, null, 2)], {
    type: 'application/json'
  })
  
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `md2dockit-settings-${new Date().toISOString().split('T')[0]}.json`
  link.click()
}

const importSettings = () => {
  fileInput.value?.click()
}

const handleImportFile = async (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (!file) return
  
  try {
    const text = await file.text()
    const data = JSON.parse(text)
    
    if (data.settings) {
      localSettings.value = { ...data.settings }
      await saveSettings()
      console.log('Settings imported successfully')
    } else {
      throw new Error('Invalid settings file format')
    }
  } catch (error) {
    console.error('Failed to import settings:', error)
    alert('导入设置失败：文件格式不正确')
  }
  
  // 清空文件输入
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}

const loadStorageStats = async () => {
  try {
    // 模拟加载存储统计
    storageStats.value = {
      totalFiles: 42,
      totalSize: '128 MB'
    }
  } catch (error) {
    console.error('Failed to load storage stats:', error)
  }
}

// 监听器
watch(() => settingsStore.settings, (newSettings) => {
  localSettings.value = { ...newSettings }
}, { deep: true })

// 生命周期
onMounted(() => {
  settingsStore.loadSettings()
  loadStorageStats()
})
</script>

<style scoped>
.settings-view {
  min-height: 100vh;
  background: #f8fafc;
}

/* 页面头部 */
.page-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 2rem 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 0.5rem 0;
}

.page-subtitle {
  color: #64748b;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

/* 设置内容 */
.settings-content {
  flex: 1;
  padding: 2rem 0;
}

.settings-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
}

/* 侧边导航 */
.settings-nav {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 1.5rem;
  height: fit-content;
  position: sticky;
  top: 2rem;
}

.nav-section {
  margin-bottom: 2rem;
}

.nav-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0.25rem;
}

.nav-item:hover {
  background: #f1f5f9;
}

.nav-item.active {
  background: #3b82f6;
  color: white;
}

.nav-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

.nav-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
}

.nav-badge {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background: #f59e0b;
  color: white;
  border-radius: 12px;
  font-weight: 500;
}

.nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.2);
}

/* 设置面板 */
.settings-panel {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.setting-section {
  padding: 2rem;
}

.section-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 0.5rem 0;
}

.section-description {
  color: #64748b;
  margin: 0;
}

/* 设置组 */
.setting-groups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.setting-group {
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 1.5rem;
}

.group-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1rem 0;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-info {
  flex: 1;
}

.setting-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
  display: block;
}

.setting-desc {
  font-size: 0.8125rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.setting-control {
  flex-shrink: 0;
}

/* 控件样式 */
.setting-select,
.setting-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  min-width: 150px;
  transition: all 0.2s ease;
}

.setting-select:focus,
.setting-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 开关样式 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.2s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #3b82f6;
}

input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* 主题选择器 */
.theme-selector {
  display: flex;
  gap: 0.5rem;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

.theme-option:hover {
  border-color: #9ca3af;
}

.theme-option.active {
  border-color: #3b82f6;
  background: #eff6ff;
}

.theme-icon {
  opacity: 0.7;
}

.theme-option.active .theme-icon {
  opacity: 1;
  color: #3b82f6;
}

.theme-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
}

.theme-option.active .theme-label {
  color: #3b82f6;
}

/* 格式网格 */
.format-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.format-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.format-option:hover {
  border-color: #9ca3af;
}

.format-option.active {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #3b82f6;
}

.format-icon {
  opacity: 0.7;
}

.format-option.active .format-icon {
  opacity: 1;
}

.format-label {
  font-size: 0.875rem;
  font-weight: 500;
}

/* 质量选择器 */
.quality-selector {
  width: 200px;
}

.quality-slider {
  width: 100%;
  margin-bottom: 0.5rem;
}

.quality-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
}

/* 存储统计 */
.storage-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.stat-icon {
  width: 40px;
  height: 40px;
  background: #3b82f6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: #64748b;
}

/* 设置操作 */
.setting-actions {
  display: flex;
  gap: 1rem;
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #2563eb;
}

.btn-secondary {
  background: #6b7280;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #4b5563;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .settings-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .settings-nav {
    position: static;
  }
  
  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .nav-item {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .settings-content {
    padding: 1rem 0;
  }
  
  .settings-container {
    padding: 0 1rem;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .theme-selector {
    justify-content: stretch;
  }
  
  .theme-option {
    flex: 1;
  }
  
  .format-grid {
    grid-template-columns: 1fr;
  }
  
  .storage-stats {
    grid-template-columns: 1fr;
  }
  
  .setting-actions {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .header-actions {
    flex-direction: column;
  }
  
  .nav-list {
    flex-direction: column;
  }
  
  .setting-section {
    padding: 1.5rem;
  }
  
  .setting-group {
    padding: 1rem;
  }
}
</style>